import 'package:flutter/material.dart';
import 'package:get/get.dart';

class StepsWidget extends StatefulWidget {
  const StepsWidget(
      {Key? key, required this.currentIndex, this.isPlacement = true})
      : super(key: key);
  final int currentIndex;
  final bool isPlacement;

  @override
  _StepsWidgetState createState() => _StepsWidgetState();
}

class _StepsWidgetState extends State<StepsWidget> {
  @override
  Widget build(BuildContext context) {
    var _items = widget.isPlacement
        ? ["Welcome", "My Chinese Experience", "Quizzes", "Placed Level"]
        : ["Reading Recording", "Oral Response", "Multiple Choice", "Finish"];
    return Container(
      height: widget.isPlacement?70:90,
      alignment: Alignment.center,
      child: ListView.builder(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          scrollDirection: Axis.horizontal,
          itemCount: _items.length,
          itemBuilder: (context, index) {
            return _buildItem(index, context, _items);
          }),
    );
  }

  Widget _buildItem(int index, BuildContext context, List _items) {
    var itemWidth = (MediaQuery.of(context).size.width * 0.9 - 40) * 0.25;
    return Container(
      width: itemWidth,
      padding: EdgeInsets.only(top: 3),
      child: Column(
        children: [
          Row(
            children: [
              Opacity(
                opacity: index == 0 ? 0 : 1,
                child: Container(
                  width: widget.isPlacement?(itemWidth - 40) * 0.5:(itemWidth - 50) * 0.5,
                  height: 1,
                  decoration: BoxDecoration(
                      color: index <= widget.currentIndex
                          ? Color(0xffC8E7C9)
                          : Color(0xffE0E0E0)),
                ),
              ),
              SizedBox(width: 5),
              Container(
                  width: widget.isPlacement?30:40,
                  height: widget.isPlacement?30:40,
                  padding: EdgeInsets.only(top: 3),
                  alignment: Alignment.center,
                  child: (index < widget.currentIndex)
                      ? Icon(Icons.check, color: Color(0xff4CAF50), size: widget.isPlacement?22:30)
                      : Text((index + 1).toString(),
                          style: TextStyle(
                              fontSize: widget.isPlacement?16:20,
                              fontWeight: FontWeight.bold,
                              color: Color(0xff3D89BC))),
                  decoration: BoxDecoration(
                      color: index == widget.currentIndex
                          ? Color(0xffFCB016)
                          : (index < widget.currentIndex)
                              ? Color(0xffC8E7C9)
                              : Colors.white,
                      borderRadius: BorderRadius.circular(widget.isPlacement?15:20))),
              SizedBox(width: 5),
              Opacity(
                opacity: _items.length - 1 == index ? 0 : 1,
                child: Container(
                  width: widget.isPlacement?(itemWidth - 40) * 0.5:(itemWidth - 50) * 0.5,
                  height: 1,
                  decoration: BoxDecoration(
                      color: index < widget.currentIndex
                          ? Color(0xffC8E7C9)
                          : Color(0xffE0E0E0)),
                ),
              )
            ],
          ),
          Container(
            padding: EdgeInsets.only(top: widget.isPlacement?5:10),
            height: widget.isPlacement?37:47,
            child: Text(
              _items[index],
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: widget.isPlacement?14:16,
                  color: index <= widget.currentIndex
                      ? Colors.white
                      : Get.isDarkMode
                      ? Colors.white38
                      : Colors.black38),
            ),
          )
        ],
      ),
    );
  }
}
